import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import useProjection from './useProjection'
import useTileGrid from './useTileGrid'
import { ref, watch } from 'vue'
export default function () {
    const { proj4326 } = useProjection()

    const { tileGrid } = useTileGrid()

    const tileImageSource = new XYZ({
        url:'/download/tiles/googletile/{z}/{x}/{y}.png',
        // tileUrlFunction: function (tileCoord) {
        //     const z = tileCoord[0]
        //     const x = tileCoord[1]
        //     const y = Math.abs(tileCoord[2]) //
        //     // let url = mapStore.mapTileUrl + '/tiles/img_c/' + z + '/' + x + '/' + y
        //     // let url = 'http://192.168.0.111:8001' + '/tiles/img_c/' + z + '/' + x + '/' + y
        //     // let url = '/map_api' + '/tiles/img_c/' + z + '/' + x + '/' + y
        //     // const url = '/tiles/img_c/' + z + '/' + x + '/' + y
        //     const url = `/download/tiles/googletile/${z}/${x}/${y}.png`

        //     return url
        // },
        wrapX: false,
        // tileGrid: tileGrid,
        // projection: proj4326?.getCode(),
    })

    const tileLayer = new TileLayer({
        source: tileImageSource,
        visible: true,
        zIndex: 5,
        maxZoom: 19,
        preload: Infinity,
    })

    return {
        tileLayer,
    }
}
